<!DOCTYPE html>
<html>
<head>
    <title>购物车</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="author" content="">
    <meta name="description" content="至上会计移动端CRM管理系统">
    <link rel="stylesheet" href="../lib/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="css/mywe.css">
    <link rel="stylesheet" href="css/shop.css">
</head>
<body ontouchstart>
    <div class="main shopcart">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="color-gray">购物车内共有 <span class="color-red">0</span> 件商品</p>
                </div>
                <div class="weui-cell__ft color-blue edit">编辑</div>
            </div>
        </div>
        <div id="haveser">
            <div class="height8"></div>
            <div class="weui-cells weui-cells_checkbox">
                <div class="shoplist">
                    <label class="weui-cell weui-check__label" for="s11">
                        <div class="weui-cell__hd">
                            <input type="checkbox" class="weui-check" name="checkbox1" id="s11">
                            <i class="weui-icon-checked"></i>
                        </div>
                        <div class="weui-cell__bd">
                            <div class="weui-panel">
                                <div class="weui-panel__bd">
                                    <div class="weui-media-box weui-media-box_appmsg">
                                        <div class="weui-media-box__hd">
                                            <img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt=""><img class="weui-media-box__thumb" src="" alt="">
                                        </div>
                                        <div class="weui-media-box__bd">
                                            <h4 class="weui-media-box__title weui-flex">
                                                <div class="weui-flex__item">小规模代理记账(一年)</div>
                                                <div class="color-red big">¥<span class="price">300</span></div>
                                            </h4>
                                            <p class="weui-media-box__desc">浙江省 杭州市 西湖区</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>

            </div>
            <div class="height8"></div>
            <div class="weui-msg">
                <div class="weui-msg__icon-area"><i class="iconfont weui-icon_msg color-gray">&#xe61e;</i></div>
                <div class="weui-msg__text-area">
                    <p class="weui-msg__desc">您的购物车是空的</p>
                </div>
                <div class="weui-msg__opr-area">
                    <p class="weui-btn-area">
                        <a href="javascript:;" class="weui-btn weui-btn_plain-default">去选择服务</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <footer class="weui-flex">
        <div href="shopcart.html" class="order-money color-gray">
            <span class="small">优惠：&nbsp;</span>
            <span class="small">0元</span>&nbsp;&nbsp;
            <span class="small">应付：&nbsp;</span>
            <span class="color-red"><span class="total">0</span>元</span>
        </div>
        <a href="myorder.html" class="weui-flex__item bg-danger order-footer">结算</a>
    </footer>

    <script src="../lib/jquery-2.1.4.js"></script>
    <script src="../lib/fastclick.js"></script>
    <script src="../js/jquery-weui.min.js"></script>
    <script src="../js/city-picker.min.js"></script>

    <script>
        $(function () {
            FastClick.attach(document.body);
        });
        /*编辑*/
        $(".edit").click(function () {
            var a= $(".edit").html();
            if (a=="编辑"){
                $(".edit").html("完成");
                $(".countbox .count").hide();
                $(".countbox .hidden").show();
            }else if (a=="完成"){
                $(".edit").html("编辑");
                $(".countbox .hidden").hide();
                $(".countbox .count").show();
            }
        });
        /*删除商品*/
        $(".countbox .hidden").click(function () {
            var type=$(this).parents(".shoplist").find("input:checkbox")[0].checked;
            if(type==true){
                var num=Number($(this).parents(".shoplist").find(".countbox .num").text());
                var price=Number($(this).parents(".shoplist").find(".price").text());
                total-=price*num;
                $(".total").text(total);
            }
            $(this).parents(".shoplist").remove();
        });

        var total=Number($(".total").text());
        $("input:checkbox").each(function () {
            var type=$(this)[0].checked;
            var price=Number($(this).parents(".weui-check__label").find(".price").text());
            var num=Number($(this).parents(".weui-check__label").find(".num").text());
            if(type ==true){
                total+=price*num;
                $(".total").text(total);
            }
        });
        /*$("input:checkbox").each(function () {
            var type=$(this)[0].checked;
            var price=Number($(this).parents(".weui-check__label").find(".price").text());


            if(type ==true){
                total+=price;
                $(".total").text(total);
            }
        });*/
        /*加*/
        $(".add").click(function () {
            var num= $(this).parent().find(".num").text();
            num++;
            $(this).parents(".shoplist").find(".num").text(num);
            var type=$(this).parents(".shoplist").find("input:checkbox")[0].checked;
            if(type==true){
                var price=Number($(this).parents(".shoplist").find(".price").text());
                total+=price;
                $(".total").text(total);
            }
        });
        /*减*/
        $(".minus").click(function () {
            var num= $(this).parent().find(".num").text();
            if(num>1){
                num--;
                $(this).parents(".shoplist").find(".num").text(num);
                var type=$(this).parents(".shoplist").find("input:checkbox")[0].checked;
                if(type==true){
                    var price=Number($(this).parents(".shoplist").find(".price").text());
                    total-=price;
                    $(".total").text(total);
                }
            }else {
                $.toast("受不了了，<br>不能再少了！","text");
            }
        });
        /*选择商品*/
        $("input:checkbox").click(function () {
            var type=$(this)[0].checked;
            var price=Number($(this).parents(".weui-check__label").find(".price").text());
            var num=Number($(this).parents(".weui-check__label").find(".num").text());

            if(type ==true){
                total+=price*num;
                $(".total").text(total);
            }else {
                total-=price*num;
                $(".total").text(total);
            }
        });

        $(".weui-media-box__hd").each(function () {
            var nums=$(this).find(".weui-media-box__thumb").length;
            console.log(nums);
            if (nums==2){
                $(this).find(".weui-media-box__thumb").css("width","50%");
                $($(this).find(".weui-media-box__thumb")[1]).addClass("right-bottom");
                $($(this).find(".weui-media-box__thumb")[0]).addClass("left-top");
            }else if(nums==3){
                $(this).find(".weui-media-box__thumb").css("width","50%");
                $($(this).find(".weui-media-box__thumb")[2]).css({"position":"absolute","left":"15px","bottom":"0px"});
            }else if(nums==4){
                $(this).find(".weui-media-box__thumb").css({"width":"50%","float":"left"});
            }else if(nums==5){
                $(this).find(".weui-media-box__thumb").css({"width":"50%","float":"left"});
                $($(this).find(".weui-media-box__thumb")[4]).css({"position":"absolute","left":"15px","bottom":"15px"});
            }else if(nums==6){
                $(this).find(".weui-media-box__thumb").css({"width":"33%","float":"left","margin-top":"7px"});
            }else if(nums==7){
                $($(this).find(".weui-media-box__thumb")[3]).after('<img class="weui-media-box__thumb" src="./images/logo.png" alt="" style="width: 33%; float: left;">');
                $($(this).find(".weui-media-box__thumb")[6]).after('<img class="weui-media-box__thumb" src="./images/logo.png" alt="" style="width: 33%; float: left;">');
                $(this).find(".weui-media-box__thumb").css({"width":"33%","float":"left"});
            }else if(nums==8){
                $($(this).find(".weui-media-box__thumb")[3]).after('<img class="weui-media-box__thumb" src="./images/logo.png" alt="" style="width: 33%; float: left;">');
                $(this).find(".weui-media-box__thumb").css({"width":"33%","float":"left"});
            }else if(nums>=9){
                $(this).find(".weui-media-box__thumb").css({"width":"33.33%","float":"left"});
            }
        });
    </script>

</body>
</html>